<template>
  <el-container style="width: 100%; height: 100%">
    <el-header class="header">
      <!-- <img src="./img/Group 1142813148.png" alt=""> -->
      跨空间关联映射对抗系统
    </el-header>
    <el-main style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <div class="loginform">
        <div class="formtitle">
          用户登录
        </div>
        <el-form ref="form" :model="form" label-position="left" class="fo">
          <el-form-item prop="username">
            <el-input v-model="form.username" class="formun" prefix-icon="el-icon-user" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" class="formpw" prefix-icon="el-icon-lock"
              placeholder="密码" />
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="8">
                <el-checkbox v-model="form.rememberMe" style="color: #3DB3FB;">
                  记住密码
                </el-checkbox>
              </el-col>
              <el-col :span="8" :offset="8">
                <el-button type="text">
                  忘记密码？
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="loginBtn" @click="tohome">
              <!-- <el-button
              type="primary"
              class="loginBtn"
              @click="submitForm('form')"
            > -->
              登陆
            </el-button>
          </el-form-item>
        </el-form>
        <!-- <img src="../assets/footer.png" alt=""> -->
      </div>
    </el-main>
    <!--
        <el-footer>

        </el-footer> -->
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    tohome() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="scss" scoped>
.fo {
  ::v-deep {

    .el-input__inner {
      background: transparent;
      color: #fff;
      font-size: 24px;
    }
  }
}

.header {
  text-align: center;
  font-size: 38px;
  color: #FFFFFF;
  line-height: 44.53px;
  font-weight: Regular;
  font-family: eryaxingguanghei-Regular;
  background-color: #062561;
  // background-image: url('../assets/header.png');
  background-image: url('../../../assets/xd/new/header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.loginform {
  width: 484px;
  height: 440px;
  text-align: center;
  background: linear-gradient(to bottom, #0D6DB8, #053884);
  /* 设置渐变背景 */
  background-image: url('../../../assets/xd/new/loginform.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

}

.el-input {
  width: 400px;
}

.formtitle {
  text-align: center;
  font-size: 30px;
  color: #fff;
  padding: 30px;
}

.el-main {
  background-color: #062561;
  background-image: url('../../../assets/xd/new/loginbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.loginBtn {
  width: 400px;
  background-image: linear-gradient(to right, #0E5FFF, #2DB2FD);
}
</style>
